import { observer } from 'mobx-react-lite'
import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
import { storeAll } from '@/store'

const ParkingType: React.FC = () => {
	const chartRef = useRef<HTMLDivElement>(null)
	const { carsStore: { cars }, parkingLotTypeStore: { parkingLotType }, parkingStore: { parking } } = storeAll
	const indicator = parkingLotType.map(item => {
		return {
			text: item.notes,
			max: parking.filter(item1 => item1.type === item.id).length
		}
	})
	const value: number[] = parkingLotType.map(item => cars.filter(item1 => item1.type === item.notes).length)
	useEffect(() => {
		if (!chartRef.current) return
		const chart = echarts.init(chartRef.current)
		const lineStyle = {
			width: 1,
			opacity: 0.5
		};
		// const option: echarts.EChartOption = {
		// 	backgroundColor: '#161627',
		// 	title: {
		// 		text: '车位占比统计',
		// 		left: 'left',
		// 		textStyle: {
		// 			color: '#eee'
		// 		}
		// 	},
		// 	tooltip: {
		// 		trigger: 'item',
		// 	},
		// 	radar: {
		// 		indicator,
		// 		shape: 'circle',
		// 		splitNumber: 5,
		// 		axisName: {
		// 			color: 'rgb(238, 197, 102)'
		// 		},
		// 		splitLine: {
		// 			lineStyle: {
		// 				color: [
		// 					'rgba(238, 197, 102, 0.1)',
		// 					'rgba(238, 197, 102, 0.2)',
		// 					'rgba(238, 197, 102, 0.4)',
		// 					'rgba(238, 197, 102, 0.6)',
		// 					'rgba(238, 197, 102, 0.8)',
		// 					'rgba(238, 197, 102, 1)'
		// 				].reverse()
		// 			}
		// 		},
		// 		splitArea: {
		// 			show: false
		// 		},
		// 		axisLine: {
		// 			lineStyle: {
		// 				color: 'rgba(238, 197, 102, 0.5)'
		// 			}
		// 		}
		// 	},
		// 	series: [
		// 		{
		// 			name: 'Beijing',
		// 			type: 'radar',
		// 			lineStyle: lineStyle,
		// 			// label: {
		// 			// 	show: true,
		// 			// 	formatter: (value: any) => {
		// 			// 		return value
		// 			// 	}
		// 			// },
		// 			data: [
		// 				{
		// 					value,
		// 					tooltip: {
		// 						formatter: function (params: any) {
		// 							return '车辆占比类型';
		// 						}
		// 					},
		// 					label: {
		// 						show: true,
		// 						formatter: '{b}: {d}'
		// 					}
		// 				},
		// 			],
		// 			symbol: 'none',
		// 			itemStyle: {
		// 				color: '#F9713C'
		// 			},
		// 			areaStyle: {
		// 				opacity: 0.1
		// 			}
		// 		}
		// 	]
		// };
		const option: any = {
			color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
			title: {
				text: 'Customized Radar Chart'
			},
			legend: {},
			radar: [
				{
					indicator: [
						{ text: 'Indicator1' },
						{ text: 'Indicator2' },
						{ text: 'Indicator3' },
						{ text: 'Indicator4' },
						{ text: 'Indicator5' }
					],
					center: ['25%', '50%'],
					radius: 120,
					startAngle: 90,
					splitNumber: 4,
					shape: 'circle',
					axisName: {
						formatter: '【{value}】',
						color: '#428BD4'
					},
					splitArea: {
						areaStyle: {
							color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
							shadowColor: 'rgba(0, 0, 0, 0.2)',
							shadowBlur: 10
						}
					},
					axisLine: {
						lineStyle: {
							color: 'rgba(211, 253, 250, 0.8)'
						}
					},
					splitLine: {
						lineStyle: {
							color: 'rgba(211, 253, 250, 0.8)'
						}
					}
				},
				{
					indicator: [
						{ text: 'Indicator1', max: 150 },
						{ text: 'Indicator2', max: 150 },
						{ text: 'Indicator3', max: 150 },
						{ text: 'Indicator4', max: 120 },
						{ text: 'Indicator5', max: 108 },
						{ text: 'Indicator6', max: 72 }
					],
					center: ['75%', '50%'],
					radius: 120,
					axisName: {
						color: '#fff',
						backgroundColor: '#666',
						borderRadius: 3,
						padding: [3, 5]
					}
				}
			],
			series: [
				{
					type: 'radar',
					emphasis: {
						lineStyle: {
							width: 4
						}
					},
					data: [
						{
							value: [100, 8, 0.4, -80, 2000],
							name: 'Data A'
						},
						{
							value: [60, 5, 0.3, -100, 1500],
							name: 'Data B',
							areaStyle: {
								color: 'rgba(255, 228, 52, 0.6)'
							}
						}
					]
				},
				{
					type: 'radar',
					radarIndex: 1,
					data: [
						{
							value: [120, 118, 130, 100, 99, 70],
							name: 'Data C',
							symbol: 'rect',
							symbolSize: 12,
							lineStyle: {
								type: 'dashed'
							},
							label: {
								show: true,
								formatter: function (params: any) {
									return params.value;
								}
							}
						},
						// {
						// 	value: [100, 93, 50, 90, 70, 60],
						// 	name: 'Data D',
						// 	areaStyle: {
						// 		color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
						// 			{
						// 				color: 'rgba(255, 145, 124, 0.1)',
						// 				offset: 0
						// 			},
						// 			{
						// 				color: 'rgba(255, 145, 124, 0.9)',
						// 				offset: 1
						// 			}
						// 		])
						// 	}
						// }
					]
				}
			]
		};

		chart.setOption(option);

		return () => {
			// myChart.dispose() 销毁实例。实例销毁后无法再被使用
			chart.dispose()
		}
	}, [indicator, value])
	return <div ref={chartRef} style={{ width: "620px", height: "400px" }}></div>
}

export default observer(ParkingType)